﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_Form.cshtml";
}

<link href="~/Content/js/jquery-ui/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/js/slidebar/slidebar.css" rel="stylesheet" />
<link href="~/Content/js/workflow/flow.css" rel="stylesheet" />
<script src="~/Content/js/jquery-ui/jquery-ui.min.js"></script>
<script src="~/Content/js/jsplumb.min.js"></script>
<script src="~/Content/js/slidebar/slidebar.min.js"></script>
<script src="~/Content/js/workflow/flow.min.js"></script>
<script>
    var keyValue = $.request("keyValue");
    $(function () {
        initControl();
        if (!!keyValue) {
            $.ajax({
                url: "/WorkFlow/WFDef/GetFormJson",
                data: { keyValue: keyValue },
                dataType: "json",
                success: function (data) {
                    $('#cateName').text(data.cateName);
                    $('#version').text(data.version);
                    $('#stableVersion').text(data.stableVersion);
                    $('#name').text(data.name);
                    $('#remark').text(data.remark);
                    window.hxFlow.setFlow({
                        businessUrl: data.businessUrl,
                        modelKey: data.modelKey,
                        auditUrl: data.auditUrl,
                        before: data.before,
                        after: data.after,
                        skipEvent: data.skipEvent,
                        size: data.size,
                        nodes: data.nodes,
                        links: data.nodeLinks
                    });
                }
            });
        }
    });
    function initControl() {
        resize();
        $('#flow-right').slidebar({ side: "right", autoClose: false });
        window.hxFlow = new HxFlow({ model: {readonly:true}});
    }

    function resize() {
        $("#flow-container").height($(window).height() - $("table").height());
    }
</script>
<form id="form1">
    <table class="form">
        <tr>
            <th class="formTitle">分类</th>
            <td class="formValue">
                <label id="cateName"></label>
            </td>
            <th class="formTitle">名称</th>
            <td class="formValue">
                <label id="name"></label>
            </td>
        </tr>
        <tr>
            <th class="formTitle">最新版本</th>
            <td class="formValue">
                <label id="version"></label>
            </td>
            <th class="formTitle">发布版本</th>
            <td class="formValue">
                <label id="stableVersion"></label>
            </td>
        </tr>
        <tr>
            <th class="formTitle" valign="top" style="padding-top: 5px;">
                备注
            </th>
            <td class="formValue" colspan="3">
                <label id="remark" style="height:60px;"></label>
            </td>
        </tr>
    </table>
            
    <div id="flow-container" class="flow-container">
                    <div id="flow-panel" class="flow-panel">
                        <div id="flow-center" class="flow-center" tabindex="0"></div>
                        <div id="flow-right" class="flow-right">
                            <div id="flow-props">

                            </div>
                        </div>
                    </div>
                </div>
</form>